<template>
  <MainLayout>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">让AnyRender工作区为您工作</div>
        <div class="forum-header-content">您的终极3D工作流程、项目容器和资产中心。</div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('')">发现工作区计划</div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/business/workspace/1.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">将人员引入您的工作流程以协作，反馈和保持一致</div>
        <div class="threeD-tips">不仅仅是文件存储</div>
        <div class="threeD-description">矢量工作空间旨在减少创意障碍，因此您可以保持组织、透明并为未来做好准备。</div>
      </div>
    </section>

    <div class="card-section">
      <div class="container">
        <div class="card-content">
          <div class="card-item" v-for="item in cardList1" :key="item.title">
            <div class="card-item-icon">
              <img :src="`/images/business/workspace/icon/${item.icon}.png`" alt="" />
            </div>
            <div class="card-item-title">{{ item.title }}</div>
            <div class="card-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>

    <section class="threeD-section gray">
      <div class="container">
        <div class="threeD-tips">AnyRender工作流程</div>
        <div class="threeD-title">从一个中央枢纽创建、修订、共享和存储</div>
      </div>
      <img class="img-section-img not-shadow" src="/images/business/workspace/2.jpg" alt="" />
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">在与商业工作区团队合作时保持生产力</div>
        <div class="threeD-description">
          虽然专业工作区主要用于个人使用，但商业工作区迎合优先考虑速度、安全性和协作的公司。业务工作区旨在提高工作流程效率并加强团队协作，为跨部门和客户管理3D项目提供了一个安全的环境。
        </div>
        <div class="find-btn">
          <div class="find-btn-txt more" @click="jump('')">了解更多关于商业工作区的信息</div>
        </div>
      </div>
    </section>

    <div class="card-section">
      <div class="container">
        <div class="card-content">
          <div class="card-item" v-for="item in cardList2" :key="item.title">
            <div class="card-item-icon">
              <img :src="`/images/business/workspace/icon/${item.icon}.png`" alt="" />
            </div>
            <div class="card-item-title">{{ item.title }}</div>
            <div class="card-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">有效的3D工作流程的基础是从正确的工作空间设置开始的</div>
        <div class="threeD-tips">设置业务工作区</div>
        <div class="threeD-description">首先授予您的团队成员访问权限并设置他们的用户角色。</div>
        <img class="img-section-img" src="/images/business/workspace/3.jpg" alt="" />
      </div>
    </section>

    <section class="workspace-section">
      <div class="container">
        <div class="workspace-header">
          <div class="workspace-header-left">
            <div class="workspace-header-title">充分利用你的工作空间</div>
            <div class="workspace-header-desc">设置多个工作区，以便展示、反馈和测试原型。方法如下：</div>
          </div>
          <div class="workspace-header-right">
            <img src="/images/business/workspace/4.png" alt="" />
            <img src="/images/business/workspace/youjiantou.png" alt="" />
            <img src="/images/business/workspace/5.png" alt="" />
          </div>
        </div>
        <div class="card-list">
          <div class="card-item" v-for="item in cardList3" :key="item">{{ item }}</div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/business/workspace/6.jpg" alt="" />
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">属于你的成功投资</div>
      </div>
    </section>
    <section class="threeD-content">
      <div class="container">
        <div class="threeD-list">
          <div class="threeD-item" v-for="item in touziList" :key="item.title">
            <div class="threeD-item-inner">
              <img class="threeD-item-img" :src="item.img" alt="" />
              <div class="threeD-item-tips">{{ item.tips }}</div>
              <div class="threeD-item-title">{{ item.title }}</div>
              <div class="threeD-item-content">{{ item.desc }}</div>
              <div class="threeD-item-btn" @click="jump(item.path)">{{ item.btn }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  let cardList1 = [
    {
      title: "可访问性",
      desc: "工作区基于云，可以从AnyRender编辑器和任何浏览器访问。",
      icon: "1",
    },
    {
      title: "共享选项",
      desc: "专业工作区允许项目链接共享。此外，商业工作区有团队成员资格选项。",
      icon: "2",
    },
    {
      title: "项目组织",
      desc: "工作区提供可修改的文件管理、共享项目指标、项目锁定以防止意外编辑等。",
      icon: "3",
    },
  ];
  let cardList2 = [
    {
      title: "安全功能",
      desc: "增强的安全措施，包括使用公司电子邮件帐户的单点登录（SSO）验证。",
      icon: "4",
    },
    {
      title: "协作和访问控制",
      desc: "公司管理员可以分发和规范工作区邀请，添加团队成员，分配角色（查看者、编辑）。",
      icon: "5",
    },
    {
      title: "定制品牌",
      desc: "在3D查看器中使用公司子域，以维护品牌标识，并向竞争对手隐藏矢量详细信息。",
      icon: "6",
    },
    {
      title: "API集成",
      desc: "业务工作区提供API连接的3D配置器，允许从多个来源访问数据。",
      icon: "7",
    },
    {
      title: "内容交付网络",
      desc: "使用CDN使用本地服务器更快地访问项目，无论位置如何，都可以提高可访问性。",
      icon: "8",
    },
    {
      title: "评论",
      desc: "商业工作区提供3D评论功能，允许团队成员直接在3D空间中提供反馈。",
      icon: "9",
    },
  ];
  let cardList3 = [
    "为每个合作伙伴提供安全、私密的数字环境。",
    "允许您保持对工作区访问权限的控制。",
    "将工作区用作模型、材料的私人设计库",
    "将其设置为管理所有3D资产的中央枢纽。",
  ];

  let touziList = [
    {
      tips: "对于个人",
      title: "专业工作区",
      desc: "设计师向客户或任何外部合作伙伴提供概念的理想计划。受益于访问设置高质量可视化、交互式体验和多个共享选项的功能。",
      btn: "订阅并开始",
      img: "/images/business/workspace/7.jpg",
      path: "",
    },
    {
      tips: "对于公司",
      title: "商业工作空间",
      desc: "企业解决方案和功能，用于将流畅的工作流程集成到任何3D案例中，将部门和设计平台聚集在一起。管理任何团队规模的访问权限和文件安全性。",
      btn: "与销售联系",
      img: "/images/business/workspace/8.jpg",
      path: "/business/contact",
    },
  ];

  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0 0;

    .container {
      .forum-header-title {
        font-size: 64px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 3px;
      }
      .forum-header-content {
        margin: 20px auto;
        width: 50%;
        line-height: 1.6;
        text-align: center;
        font-size: 16px;
        color: #585858;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 38px;
          letter-spacing: 1px;
        }
        .forum-header-content {
          margin-top: 20px;
          font-size: 14px;
          width: 80%;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
      }
    }
  }

  .find-btn {
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    &.left {
      justify-content: flex-start;
    }
    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 6px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      &:hover {
        background-color: transparent;
        color: #703ffa;
      }
      &.transparent {
        color: #703ffa;
        background-color: transparent;

        &:hover {
          background-color: #703ffa;
          color: #fff;
        }
      }
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 20px auto;
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }

  .img-section {
    padding: 40px 0 40px;
  }
  .img-section-img {
    width: 100%;
    margin: 20px auto;
    border-radius: 20px;
    overflow: hidden;
    object-fit: cover;
    box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
    &.not-shadow {
      box-shadow: none;
    }
  }

  .threeD-section {
    padding: 40px 0 60px;
    color: #000;
    text-align: center;
    &.gray {
      background-color: #ededee;
    }
    .container {
      .threeD-title {
        font-size: 48px;
        font-weight: 500;
      }
      .threeD-tips {
        font-size: 22px;
        margin: 20px auto;
      }
      .threeD-description {
        width: 90%;
        margin: 15px auto;
        font-size: 16px;
        color: #5c5c5c;
      }
      .find-btn-txt {
        color: #703ffa;
        background-color: transparent;
        transition: all 0.2s ease-in-out;
        &.more,
        &:hover {
          background-color: #703ffa;
          color: #fff;
          &:hover {
            background-color: transparent;
            color: #703ffa;
          }
        }
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-title {
          font-size: 36px;
        }
        .threeD-tips {
          font-size: 18px;
          margin: 20px auto;
        }
        .threeD-description {
          font-size: 16px;
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-title {
          font-size: 32px;
        }
        .threeD-tips {
          font-size: 18px;
          margin: 18px auto;
        }
        .threeD-description {
          width: 100%;
          font-size: 16px;
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-title {
          font-size: 28px;
        }
        .threeD-tips {
          font-size: 16px;
          margin: 14px auto;
        }
        .threeD-description {
          font-size: 14px;
        }
      }
    }
  }

  .secure-content {
    padding: 25px 0;
    .container {
      .secure-level {
        display: flex;
        justify-content: space-between;
        .secure-level-content {
          flex: 1;
          width: 50%;
          padding: 0 0 0 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .secure-level-tips {
            font-size: 16px;
            font-weight: 500;
            color: #383838;
            margin-bottom: 20px;
          }
          .secure-level-tips-small {
            font-size: 14px;
            font-weight: 500;
            color: #929292;
          }
          .secure-level-title {
            font-size: 32px;
            font-weight: 500;
            color: #383838;
            margin-bottom: 20px;
          }
          .secure-level-desc {
            margin: 0 0 20px;
            font-size: 16px;
            color: #585858;
            li {
              list-style: none;
              position: relative;
              padding-left: 15px;
              &::before {
                content: "•";
                position: absolute;
                left: 0;
                top: 50%;
                color: #585858;
                font-size: 16px;
                transform: translateY(-50%);
              }
            }
          }
          .secure-level-btn {
            .secure-level-btn-inner {
              display: inline-block;
              font-size: 16px;
              color: #fff;
              border: 1px solid #703ffa;
              background-color: #703ffa;
              border-radius: 10px;
              padding: 6px 20px;
              cursor: pointer;
              transition: all 0.3s ease;

              &.more {
                background-color: transparent;
                color: #703ffa;
                transition: all 0.2s ease-in-out;
                &:hover {
                  background-color: #703ffa;
                  color: #fff;
                }
              }
            }
          }
        }
        .secure-iso {
          flex: 1;
          width: 50%;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .secure-level {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .secure-level-content {
            flex: 1 1 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .secure-level-title {
              font-size: 28px;
              font-weight: 500;
              text-align: center;
            }
            .secure-level-tips {
              font-size: 14px;
            }

            .secure-level-desc {
              font-size: 16px;
            }
            .secure-level-btn {
              margin: 0 auto;
              .secure-level-btn-inner {
                font-size: 16px;
                padding: 6px 20px;
              }
            }
          }
          .secure-iso {
            flex: 1 1 100%;
            width: 100%;
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .secure-level {
          .secure-level-content {
            .secure-level-title {
              font-size: 32px;
            }
            .secure-level-desc {
              font-size: 16px;
            }
            .secure-level-btn {
              .secure-level-btn-inner {
                font-size: 16px;
                padding: 6px 20px;
              }
            }
          }
        }
      }
    }
  }

  .card-section {
    padding: 20px 0 40px;
    .container {
      .card-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
        .card-item {
          flex: 1 1 calc(33% - 20px);
          padding: 40px 20px;
          border-radius: 16px;
          border: 1px solid #eaeaea;
          .card-item-icon {
            width: 30px;
            height: 30px;
            margin-bottom: 20px;
          }
          .card-item-title {
            font-size: 18px;
            font-weight: 550;
            margin-bottom: 15px;
          }
          .card-item-desc {
            font-size: 14px;
            color: #666;
          }
        }
      }
      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .card-content {
          gap: 15px;
          .card-item {
            padding: 30px 15px;
            flex: 1 1 calc(33% - 10px);
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .card-content {
          gap: 15px;
          .card-item {
            padding: 20px;
            flex: 1 1 100%;
          }
        }
      }
    }
  }
  .workspace-section {
    padding: 20px 0 40px;
    .container {
      .workspace-header {
        display: flex;
        justify-content: space-between;
        .workspace-header-left {
          flex: 1 1 50%;
          .workspace-header-title {
            font-size: 36px;
            font-weight: 500;
            margin-bottom: 20px;
          }
          .workspace-header-desc {
            font-size: 18px;
            color: #585858;
          }
        }
        .workspace-header-right {
          flex: 1 1 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            height: 60px;
            margin-right: 15px;
            &:nth-child(2) {
              height: 25px;
            }
          }
        }
      }
      .card-list {
        display: flex;
        gap: 28px;
        margin-top: 30px;
        justify-content: space-between;
        .card-item {
          flex: 1 1 calc(25% - 21px);
          padding: 20px;
          border-radius: 16px;
          border: 1px solid #eaeaea;
          font-weight: 500;
          font-size: 18px;
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .workspace-header {
          justify-content: space-between;
          .workspace-header-left {
            .workspace-header-title {
              font-size: 28px;
              margin-bottom: 15px;
            }
          }
          .workspace-header-right {
            img {
              height: 40px;
              margin-right: 5px;
              &:nth-child(2) {
                height: 15px;
              }
            }
          }
        }
        .card-list {
          gap: 20px;
          flex-wrap: wrap;
          .card-item {
            flex: 1 1 calc(50% - 20px);
            padding: 20px;
          }
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      .container {
        .workspace-header {
          flex-wrap: wrap;
          .workspace-header-left {
            flex: 1 1 100%;
            text-align: center;
            .workspace-header-title {
              font-size: 28px;
            }
          }
          .workspace-header-right {
            flex: 1 1 100%;
            margin-top: 20px;
            img {
              height: 40px;
              margin-right: 10px;
              &:nth-child(2) {
                height: 15px;
              }
            }
          }
        }
        .card-list {
          gap: 10px;
          .card-item {
            flex: 1 1 calc(50% - 10px);
            padding: 20px;
          }
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      .container {
        .workspace-header {
          .workspace-header-left {
            .workspace-header-title {
              font-size: 26px;
            }
          }
          .workspace-header-right {
            flex: 1 1 100%;
            margin-top: 20px;
            img {
              height: 30px;
              margin-right: 5px;
              &:nth-child(2) {
                height: 12px;
              }
            }
          }
        }
        .card-list {
          gap: 20px;
          .card-item {
            flex: 1 1 100%;
          }
        }
      }
    }
  }

  .threeD-content {
    padding: 20px 0 60px;
    .container {
      .threeD-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        .threeD-item {
          width: calc(50% - 15px);
          .threeD-item-inner {
            flex: 1 1 100%;
            width: 100%;
            height: 100%;
            .threeD-item-img {
              width: 100%;
              border-radius: 14px;
              object-fit: cover;
              margin-bottom: 20px;
            }
            .threeD-item-tips {
              font-size: 16px;
              color: #929292;
            }
            .threeD-item-title {
              font-size: 36px;
              font-weight: 500;
              color: #000;
              margin-bottom: 20px;
            }
            .threeD-item-content {
              font-size: 16px;
              color: #585858;
              padding-bottom: 20px;
            }
            .threeD-item-btn {
              align-content: flex-end;
              display: flex;
              justify-content: center;
              align-items: center;
              width: fit-content;
              padding: 10px 20px;
              font-size: 16px;
              color: #fff;
              border: 1px solid #703ffa;
              background-color: #703ffa;
              border-radius: 10px;
              cursor: pointer;
            }
          }
        }
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-list {
          .threeD-item {
            .threeD-item-inner {
              .threeD-item-title {
                font-size: 32px;
              }
              .threeD-item-content {
                padding-bottom: 10px;
              }
            }
          }
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-list {
          gap: 20px;
          .threeD-item {
            width: 100%;
            padding: 8px;
            .threeD-item-inner {
              .threeD-item-title {
                font-size: 28px;
                margin-bottom: 10px;
              }
              .threeD-item-content {
                font-size: 16px;
              }
              .threeD-item-tips {
                font-size: 14px;
              }
              .threeD-item-btn {
                padding: 6px 20px;
                font-size: 14px;
              }
            }
          }
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-list {
          gap: 10px;
          .threeD-item {
            .threeD-item-inner {
              .threeD-item-title {
                font-size: 24px;
              }
              .threeD-item-btn {
                padding: 6px 12px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
</style>
